<template>
    <div>
        <!-- <el-button type="text" @click="dialogFormVisible = true"></el-button> -->
        <el-dialog title="添加" :visible.sync="info.isShow">
            <el-form :model="form" ref="specs">
                <el-form-item label="规格名称" :label-width="formLabelWidth" role="pid">
                    <el-input v-model="form.specsname" autocomplete="off" placeholder="规格名称"></el-input>
                </el-form-item>

                <el-form-item label="规格属性" :label-width="formLabelWidth">
                    <div class="flex" v-for="item, index in specsattr" :key="index">
                        <el-input v-model="item.value" autocomplete="off" placeholder="规格属性"></el-input>
                        <el-button v-if="index == 0" @click="additem" type="primary">新增</el-button>
                        <el-button v-else @click="removeitem(index)" type="warning">移除</el-button>
                    </div>
                </el-form-item>


                <el-form-item label="菜单状态" label-width="120px" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="3">正常</el-radio>
                        <el-radio :label="6">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="reset">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
       
    </div>
</template>


<script>
import { mapState, mapActions } from 'vuex';
export default {
    props: ["info"],
    data() {
        return {
            size: 1,
            page: 1,
            specsattr: [{ value: "" }],
            form: {
                specsname: "",
                attrs: "",
                status: ""
            },
            formLabelWidth: '120px',
            rules: {
                pid: {
                    required: true, message: "请选择上级菜单", trigger: "blur"
                },
                title: { required: true, message: "请输入菜单标题", trigger: "blur" },
                type: { required: true, message: "请选择菜单类型", trigger: "blur" },
                status: { required: true, message: "请选择菜单状态", trigger: "blur" }
            }
        }

    },
    computed: {
        ...mapState("specs", ["specslist","specstotal"])
    },
    methods: {
        ...mapActions("specs", ["getspecslist"]),

        reset() {
            this.info.isShow = false
            this.form = {
                specsname: "",
                attrs: "",
                status: ""
            }
            this.$refs.specs.resetFields()
        },
        additem() {
            if (this.specsattr.length > 5) {
                return this.$message.warning("最多只能添加五条数据")
            }
            // 添加
            this.specsattr.push({ value: "" })
        },
        removeitem(index) {
            this.specsattr.splice(index, 1)
        },
        submit() {
            // 获取数据
            let attrs = this.specsattr.map(item => { return item.value })
            this.form.attrs = attrs.join()
            this.$refs.specs.validate(value => {
                if (value) {
                    console.log(this.form);
                    // console.log( this.$Api.cateadd(this.form));
                    this.$Api.specsadd(this.form).then(res => {
                        console.log(res, 12123456645);
                        // 如果成功关闭dialog页面，重新渲染页面，提示信息
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            // 重新调用这个页面
                            this.getspecslist({size:1,page:this.specstotal+1})
                            // 调用reset取消函数
                            this.reset()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                    // return
                } else {
                    console.log(11);
                }
            })
        },
    },
    mounted() {
        this.getspecslist()
    }
}

</script>


<style leng='less' scoped>
.flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}
</style>